<template>
  <el-row :gutter="40" class="panel-group">
    <el-col v-for="(item,index) in datalist" :xs="24" :sm="12" :lg="6" class="card-panel-col">

      <el-card class="box-card">
        <div slot="header">
          <span class="name" :style="'color:'+item.color"><svg-icon :icon-class="item.header_icon" /> {{ item.header }}</span>
          <el-tag class="tag" type="text" size="mini">今日</el-tag>
        </div>

        <div>
          <count-to :start-val="0" :end-val="item.today" :duration="1000" class="data-num" />
        </div>

        <div class="yesterday-data">
          <span class="yesterday-data-name">昨日：{{ item.yesterday }}</span>
          <span :class="item.balance > 0 ? 'yesterday-data-num1' : 'yesterday-data-num2'">
            <span v-if="item.balance > 0">+</span>
            {{ item.balance }}
          </span>
        </div>

        <div class="total-data">
          <div class="total-data-name">{{ item.footer }}</div>
          <div class="total-data-num">
            <router-link v-if="item.key == 'payorder'" to="/miniapp/order-list?pay_status=1">
              <count-to :start-val="0" :end-val="item.total" :duration="1000" class="total-num" />
            </router-link>

            <router-link v-if="item.key == 'user'" to="/miniapp/user-list">
              <count-to :start-val="0" :end-val="item.total" :duration="1000" class="total-num" />
            </router-link>

            <count-to v-if="item.key == 'paymoney'" :start-val="0" :end-val="item.total" :duration="1000" class="total-num" />

            <router-link v-if="item.key == 'payuser'" to="/miniapp/user-list?user_type=4">
              <count-to :start-val="0" :end-val="item.total" :duration="1000" class="total-num" />
            </router-link>
          </div>
        </div>
      </el-card>

    </el-col>

  </el-row>
</template>

<script>
import { indexdata } from '@/api/index'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import CountTo from 'vue-count-to'

export default {
  components: {
    CountTo
  },
  directives: { waves },
  data() {
    return {
      datalist: []// 首页数据
    }
  },
  created() {
    this.indexdata()
  },
  methods: {
    // 查找所有的数据
    indexdata() {
      indexdata().then(response => {
        if (response.code == 200) {
          this.datalist = response.response
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-group {margin-bottom: 20px;}
.icon-people {background: #40c9c6;}
.icon-message {background: #36a3f7;}
.icon-money {background: #f4516c;}
.icon-shopping {background: #34bfa3}

.box-card {
  .name {font-size: 15px;}
  .tag {float: right;}
  .data-num {font-size: 22px;font-weight: bold;}
  .yesterday-data {
      overflow: auto;margin: 10px 0;
     .yesterday-data-name {color: #666;}
     .yesterday-data-num1 {color: #40c9c6;margin-left: 5px;}
     .yesterday-data-num2 {color: #d81e06;margin-left: 5px;}
  }
  .total-data {
     overflow: auto;margin-top: 20px;
     .total-data-name {float: left;font-size: 13px;color: #666;}
     .total-data-num {
        float: right;
        .total-num {font-size: 16px;}
     }
  }
}
</style>
